<!DOCTYPE html>
<html ng-app="last">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <!--兼容性问题-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <!--搜索引擎-->
    <meta name="author" content="jerehedu">
    <meta name="keywords" content="bootstrap,css,html">
    <meta name="description" content="jerehedu">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>

    <script src="controller/lastController.js"></script>

    <script src="controller/commenCtrl.js"></script>

    <script src="module/lastRoute.js"></script>

    <style type="text/css"></style>
    <style>
        #move{position: absolute;top:0;left:0;}
        #border{position: absolute;top:0;left:0;}
        #border img{float:left;}
        #img{position: absolute;top:0;left:0;}
        #img img{float:left;}
    </style>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/supersized.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="bootstrapfile/css/bootstrap.min.css"/>

    <!--个人css-->
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body class="container">
    <!--头部-->
            <header>
                <nav class="navbar  navbar-default  text-left">
                        <h5></h5>
                    <div class="navbar-header">
                        <div class="navbar-brand">
                            <a href="http://gc1993.oschina.io/persanal/personalsummary.html" class="bor">
                                <img src="img/logo.jpg" alt="logo" class="logo"/>
                                <span class="logo_desc">Afanse</span>
                            </a>
                        </div>
                        <button data-target="#subNav" data-toggle="collapse" class="navbar-toggle zhedie"><!--//加折叠样式-->
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <div id="subNav"class="row collapse navbar-collapse pull-right"><!--//加按钮折叠样式，和上面配套使用-->
                        <ul class="nav navbar-nav">
                            <li><a href="#moren">常用·商城</a></li>
                            <li><a href="#work">常用·工作</a></li>
                            <li><a href="#shejiao">常用·社交</a></li>
                            <li><a href="#new">新闻</a></li>
                            <li><a href="#bank">银行</a></li>
                        </ul>
                        <div class="col-sm-2 search">
                            <input type="text"class="form-control" placeholder="Search"/>
                        </div>
                    </div>
                </nav>
            </header>
    <!--中部菜单-->

    <div ng-view="#shangcheng">
        <!--此处就像ng-include差不多把模板html加载到此-->
    </div>

    <div id="move" style="opacity: 0.4;z-index: -1;margin-top: -4%">
        <div id="border"><img src="img/1111.png" alt=""></div>
        <div id="img"><img src="img/logo.jpg" alt=""></div>
    </div><script>
        window.onload = function(){

            //各种初始化
            var oBox = document.getElementById("move");
            var oBorder = document.getElementById("border");
            var oImg = document.getElementById("img");
            var middlePointX = 0;
            var middlePointY = 0;
            var oBorderV = 0;
            var oImgV = 0;
            function getStyle(){
                middlePointX = document.documentElement.clientWidth/2;
                middlePointY = document.documentElement.clientHeight/2;

                oBox.width = oBorder.offsetWidth > oImg.clientWidth ? oBorder.clientWidth : oImg.clientWidth ;

                oBox.height = oBorder.clientHeight > oImg.clientHeight ? oBorder.clientHeight : oImg.clientHeight ;

                oBox.style.width = oBox.width + "px";

                oBox.style.height = oBox.height + "px";

                oBox.style.left = middlePointX - oBox.width/2 + "px";

                oBox.style.top = middlePointY - oBox.height/2 + "px";

                oBorder.style.left = oBox.width/2 - oBorder.clientWidth/2 + "px";

                oBorder.style.top = oBox.height/2 - oBorder.clientHeight/2 + "px";

                oImg.style.left = oBox.width/2 - oImg.clientWidth/2 + "px";

                oImg.style.top = oBox.height/2 - oImg.clientHeight/2 + "px";
            }

            getStyle();
            window.onresize = getStyle;
            document.onmousemove = function(ev){
                var ev = ev || event;
                var disX = ev.clientX;
                var disY = ev.clientY;
                oBorderV = 30;//上面图片速率比例
                oImgV = 50;//下面图片速率比例

                //(X坐标-中点)/V + 本身的left值
                oBorder.style.left = (disX - middlePointX)/oBorderV + oBox.width/2 - oBorder.clientWidth/2 + "px";

                oBorder.style.top = (disY - middlePointY)/oBorderV + oBox.height/2 - oBorder.clientHeight/2 + "px";

                oImg.style.left = (disX - middlePointX)/oImgV + oBox.width/2 - oImg.clientWidth/2 + "px";

                oImg.style.top = (disY - middlePointY)/oImgV + oBox.height/2 - oImg.clientHeight/2 + "px";
            }

        }
    </script>











<script src="bootstrapfile/js/jquery-3.1.0.min.js"></script>
<script src="bootstrapfile/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-1.8.2.min.js"></script>
<script src="assets/js/supersized.3.2.7.min.js"></script>
<script src="assets/js/supersized-init.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>